<!-- 
  setup 的时候，没法使用 this.$refs，这时如果获取 ref 属性绑定的元素或组件的内容

      1. 通过 ref() 创建一个响应式数据
      2. 将 第一步创建的 响应式数据 给到 ref 属性标记
      3. 等组件挂载完成，Vue 会自动修改 第一步响应式数据的值
 -->

<template>
  <div>
    <h1>App</h1>
    <button ref="buttonEl" @click="count++">{{ count }}</button>
    <button @click="name += '~'">{{ name }}</button>
  </div>
</template>

<script>
import { ref, watchEffect, onMounted } from "vue";

function sleep(time = 3000) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve();
    }, time);
  });
}

export default {
  setup() {
    const buttonEl = ref();

    console.log("buttonEl", buttonEl.value); // undefined

    onMounted(() => {
      console.log("onMounted buttonEl", buttonEl.value); //
    });

    const count = ref(10);
    const name = ref("张三");

    watchEffect(async () => {
      console.log("count", count.value);

      await sleep(1000, name.value);

      console.log("name", name.value);
    });

    // watchEffect(() => {
    //   console.log("count", count.value);

    //   setTimeout(() => {
    //     // 异步代码中用到的数据，不会作为当前 watchEffect 的依赖
    //     console.log("name", name.value);
    //   });
    // });

    return {
      buttonEl,
      count,
      name,
    };
  },
};
</script>
